<template>
	<view class="zg-area">
		<!-- 导航 -->
		<view class="area-nav" :style="{'padding-top': statusbar_height + 'px'}">
			<view class="nav">
				<view class="nav-left" @click="goRouter9">
					<image src="/static/imgs/shop/search.png" mode=""></image>
				</view>
				<view class="nav-center">
					<view class="nav-center-text">购物</view>
				</view>
				<view class="nav-right"></view>
			</view>
		</view>
		<!-- 切换栏 -->
		<view class="tab tp-h88" :style="{'top': statusbar_height + 44 + 'px'}">
			<view class="tab-item" :class="{active: tabindex === index}" v-for="(item,index) in tabs" :key="index" @click="changeTab(index)">
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 内容 -->
		<view class="area-content-box tp-pr" :style="{'top': statusbar_height + 44 + 'px'}">
			<view class="area-1">
				<view class="area-1-content">
					<!-- 轮播图 -->
					<view class="swiper tp-pr">
						<swiper @change="change" circular :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
							<swiper-item v-for="(item,index) in swipers" :key="index">
								<view class="swiper-item" @click="goRouter4(item)">
									<image class="tp-br12" :src="`${shopImgUrl}${item.pic}`" mode="aspectFill" @error="onImgLoadErr( swipers && swipers[index],'pic')"></image>
								</view>
							</swiper-item>
						</swiper>
						<swiper-dot class="dot" :current="current" :list="swipers"></swiper-dot>
					</view>
				</view>
			</view>
			<view class="area-2">
				<!-- 商品分类 -->
				<view class="grid" v-if="tabindex === 0 && grids.length > 0">
					<view class="grid-item" v-for="(item,index) in grids" :key="index" @click="goRouter3(item)">
						<image :src="`${shopImgUrl}${item.icon}`" mode="" @error="onImgLoadErr(grids && grids[index],'icon')"></image>
						<text>{{item.name}}</text>
					</view>
					<view class="grid-item" @click="goRouter3('')">
						<image src="/static/imgs/shop/more.png" mode=""></image>
						<text>更多</text>
					</view>
					<view class="grid-item"></view>
					<view class="grid-item"></view>
					<view class="grid-item"></view>
				</view>
				<!-- 店铺分类 -->
				<view class="grid" v-if="tabindex === 1 && grids.length > 0">
					<view class="grid-item" v-for="(item,index) in grids" :key="index" @click="goRouter16(item)">
						<image :src="`${shopImgUrl}${item.icon}`" mode="" @error="onImgLoadErr(grids[index],'icon')"></image>
						<text>{{item.name}}</text>
					</view>
					<view class="grid-item" @click="goRouter12">
						<image src="/static/imgs/shop/more.png" mode=""></image>
						<text>更多</text>
					</view>
					<view class="grid-item"></view>
					<view class="grid-item"></view>
					<view class="grid-item"></view>
				</view>
				<!-- 活动入口 -->
				<view class="banners" v-if="tabindex === 0">
					<view class="banner">
						<image @click="goRouter5" :src="wwwImgUrl + HomeActivityImg.msImg" mode="aspectFill"></image>
						
					</view>
					<view class="banner">
						<image @click="goRouter6" :src="wwwImgUrl + HomeActivityImg.ptImg" mode="aspectFill"></image>
						<image style="height: 130rpx;" @click="goRouter7" :src="wwwImgUrl + HomeActivityImg.kjImg" mode="aspectFill"></image>
					</view>
				</view>
				<!-- 限时秒杀 -->
				<view class="ms" v-if="tabindex === 0 && list4.length > 0">
					<view class="ms-top">
						<view class="ms-top-left">
							<image class="tp-img32 tp-mr20" src="../../static/imgs/shop/ms.png" mode="aspectFill"></image>
							<text>限时</text>
							<text>秒杀</text>
						</view>
						<view class="level_align tp-fc666 " @click="goRouter5">
							<text>更多</text>
							<uni-icons type="arrowright" size="18" color="#999"></uni-icons>
						</view>
					</view>
					<view class="ms-bottom" v-if="list4.length > 0">
						<scroll-view scroll-x>
							<view class="ms-list">
								<view class="ms-list-item" v-for="(item,index) in list4" :key="index" @click="goRouter11(item)">
									<view class="ms-list-item-img">
										<image class="tp-br8" :src="`${shopImgUrl}${item.pic}`" mode="aspectFill" @error="onImgLoadErr(list4[index],'pic')"></image>
									</view>
									<view class="column_align tp-fz24">
										<view class="flex align_baseline tp-red">
											<text>￥</text> <text class="tp-fz36">{{item.spikePrice || 0}}</text> 
										</view>
										<text class="tp-tdlt tp-fc999">￥{{item.price || 0}}</text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- 促销 -->
				<view class="cx" v-if="tabindex === 0 || tabindex === 1">
					<image @click="goRouter8" class="tp-br40" :src="wwwImgUrl + HomeActivityImg.promotionImg" mode="aspectFill"></image>
				</view>
				<!-- 推荐商品 -->
				<view class="tj" v-if="tabindex === 0">
					<view class="tj-title">
						<view class="tt-left">
							<text>推荐商品</text>
						</view>
						<view class="tt-right" @click="goRouter9">
							<text>查看更多</text>
							<uni-icons type="arrowright" size="18" color="#999"></uni-icons>
						</view>
					</view>
					<view class="tj-content" v-if="list1.length > 0">
						<view class="tj-sp" v-for="(item,index) in list1" :key="index" @click="goRouter10(item)">
							<view class="tjs-img">
								<image :src="`${shopImgUrl}${item.pic}`" mode="aspectFill" @error="onImgLoadErr(list1[index],'pic')"></image>
							</view>
							<view class="tjs-content">
								<view class="tsc-title ellispsis1">{{item.name}}</view>
								<view class="tsc-price">
									<view class="flex align_baseline">
										<text class="tp-red tp-fz24 flex align_baseline tp-mr20">￥ <text class="tp-fz36">{{item.discountPrice || 0}}</text></text>
										<!-- <text class="tp-fc999 tp-tdlt">￥{{item.price || 0}}</text> -->
									</view>
									<view class="tsc-right">
										<text>销量 {{item.sale || 0}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more color="#999" :status="status1" v-if="list1.length > 0"></uni-load-more>
				</view>
				<!-- 推荐店铺 -->
				<view class="tjshop" v-if="tabindex === 1">
					<view class="tj-title">
						<view class="tt-left">
							<text>推荐店铺</text>
						</view>
						<view class="tt-right" @click="goRouter12">
							<text>查看更多</text>
							<uni-icons type="arrowright" size="18" color="#999"></uni-icons>
						</view>
					</view>
					<view class="tjshop-content" v-if="list2.length > 0">
						<view class="tc" v-for="(item,index) in list2" :key="index">
							<view class="tc-top">
								<view class="tc-top-left">
									<image class="tp-br8" :src="`${shopImgUrl}${item.scCover}`" mode="aspectFill" @error="onImgLoadErr(list2[index],'scCover')"></image>
									<view class="ttl-info">
										<view class="ttl-info-title">
											<text class="ellispsis1 tp-mr20">{{item.scName}} </text>
										</view>
										<view class="ttl-info-content">
											<view>销量：{{ handleSales(item.scSales) }}</view>
											<view>评分：<text>{{item.scScore || 0}} 分</text></view>
										</view>
									</view>
								</view>
								<view class="tc-top-right">
									<view @click="goRouter13(item)" class="tp-border1 tp-ptb0lr20 tp-h56 center_combo tp-br40 tp-fz30" style="border-color: #FFAF3C;color: #FFAF3C;">
										进入店铺
									</view>
									<!-- <button plain >进入店铺</button> -->
								</view>
							</view>
							<view class="tc-bottom">
								<view class="tc-bottom-img" v-for="(item1,index1) in item.shopProductVos" :key="index1" @click="goRouter10(item1)">
									<view class="tbib">
										<image class="tp-br8" :src="`${shopImgUrl}${item1.pic}`" mode="aspectFill" @error="onImgLoadErr(item.shopProductVos&&item.shopProductVos[index1],'pic')"></image>
									</view>
									<view class="tcbp">￥{{item1.discountPrice || 0}}</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more color="#999" :status="status2" v-if="list2.length > 0"></uni-load-more>
				</view>
				<!-- 积分商城 -->
				<view class="tjscore" v-if="tabindex === 2">
					<view class="tj-title">
						<view class="tt-left">
							<text>推荐商品</text>
						</view>
						<view class="tt-right" @click="goRouter14">
							<text>查看更多</text>
							<uni-icons type="arrowright" size="18" color="#999"></uni-icons>
						</view>
					</view>
					<view class="tj-content" v-if="list3.length > 0">
						<view class="tj-sp" v-for="(item,index) in list3" :key="index" @click="goRouter15(item)">
							<view class="tjs-img">
								<image :src="`${shopImgUrl}${item.pic}`" mode="aspectFill" @error="onImgLoadErr(list3[index],'pic')"></image>
							</view>
							<view class="tjs-content">
								<view class="tsc-title ellispsis1">{{item.name}}</view>
								<view class="tsc-price">
									<view class="tsc-left tp-red">
										<text class="flex align_baseline tp-red ">￥ <text class="tp-fz36">{{item.price || 0}}</text></text>
									</view>
									<view class="tsc-right">
										<text>销量 {{item.sale || 0}}</text>
									</view>
								</view>
							</view>
							<view class="tjs-bottom">
								<text>积分可抵扣{{item.jfDeductionAmount || 0}}元</text>
							</view>
						</view>
					</view>
					<uni-load-more color="#999" :status="status3" v-if="list3.length > 0"></uni-load-more>
				</view>
			</view>
		</view>
		<!-- 购物车 -->
		<view class="hover_btn" @click="goRouter1">
			<image src="/static/imgs/shop/gwc.png" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	import swiperDot from '@/components/swiperDot/swiperDot.vue';
	export default {
		components:{
			swiperDot
		},
		data() {
			return {
				tabindex: 0,
				current: 0, // swiper
				tabs: [{
						name: '商品',
					},
					{
						name: '店铺',
					},
					{
						name: '积分商城',
					},
				],
				swipers: [],
				grids: [], // 分类
				list1: [], // 推荐商品
				list2: [], // 推荐店铺
				list3: [], // 积分商品
				list4: [], // 秒杀商品
				page1: 1,
				page2: 1,
				page3: 1,
				status1: 'more',
				status2: 'more',
				status3: 'more',
				HomeActivityImg:{},//秒杀拼团砍价促销 图
			};
		},
		onReady() {
			this.refresh()
			this.getHomeActivityImg()
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
			this.refresh()
		},
		onReachBottom() {
			if (this.tabindex === 0) {
				this.getList3_1()
			} else if (this.tabindex === 1) {
				this.getList4_1()
			} else if (this.tabindex === 2) {
				this.getList5_1()
			}
		},
		methods: {
			//获取首页活动图片
			getHomeActivityImg(){
				this.$http.post(this.$api.getHomeActivityImg).then(res => {
					if(res.code == 200){
						this.HomeActivityImg = res.data
					}
				})
			},
			refresh() {
				this.getList1()
				this.getList2()
				if (this.tabindex === 0) {
					this.getList3()
				} else if (this.tabindex === 1) {
					this.getList4()
				} else if (this.tabindex === 2) {
					this.getList5()
				}
				this.getList6()
			},
			handleArr1(arr) {
				if(Array.isArray(arr)) {
					return arr.slice(0,3)
				} else {
					return []
				}
			},
			// 切换栏目
			changeTab(index) {
				this.tabindex = index
				this.refresh()
			},
			// 去购物车
			goRouter1() {
				uni.navigateTo({
					url: '/pagesShop/list/trolley'
				});
			},
			// 去搜索
			goRouter2() {
				uni.navigateTo({
					url: '../others/homeSearch'
				});
			},
			// 商品分类
			goRouter3(item) {
				if (Object.prototype.toString.call(item) === '[object Object]' && typeof item.id === 'number' && item.id > 0) {
					uni.navigateTo({
						url: `/pagesShop/list/classify_list?nav1_id=${item.id}&nav1_name=${item.name}`
					});
				} else if(item === '') {
					uni.navigateTo({
						url: '/pagesShop/tabs/classify'
					});
				} else {
					console.error('分类id错误');
				}
			},
			// 店铺分类
			goRouter16(item) {
				if (Object.prototype.toString.call(item) === '[object Object]' && typeof item.id === 'number' && item.id > 0) {
					uni.navigateTo({
						url: `/pagesShop/list/shop_list?nav1_id=${item.id}&nav1_name=${item.name}`
					});
				} else {
					console.error('分类id错误');
				}
			},
			// 去轮播图详情
			goRouter4(item) {
				if (Object.prototype.toString.call(item) === '[object Object]' && typeof item.id === 'number' && item.id > 0) {
					// 轮播图详情
					if (item.status === "1" &&　item.id　) {
						uni.navigateTo({
							url: `/pagesShop/details/swiper_details?id=${item.id}&type=${this.tabindex}`
						});
						// 商品详情
					} else if (item.status === "2" && item.productId) {
						uni.navigateTo({
							url: `/pagesShop/details/details?cid=${item.productId}`
						});
						// 店铺详情
					} else if (item.status === "3" && item.shopId) {
						uni.navigateTo({
							url: `/pagesShop/shop/index1?sid=${item.shopId}`
						});
					} else {
						console.error('轮播图状态错误',item.status);
					}
				} else {
					console.error('轮播图id错误',item.id);
				}
			},
			// 去限时秒杀列表
			goRouter5() {
				uni.navigateTo({
					url: '/pagesShop/list/ms_list'
				});
			},
			// 去拼团商品列表
			goRouter6() {
				// #ifdef H5
				return uni.showToast({
					title: '请前往去嗨鸭小程序体验',
					icon: 'none'
				})
				// #endif
				uni.navigateTo({
					url: '/pagesShop/list/tg_list'
				});
			},
			// 去砍价商品列表
			goRouter7() {
				// #ifdef H5
				return uni.showToast({
					title: '请前往去嗨鸭小程序体验',
					icon: 'none'
				})
				// #endif
				uni.navigateTo({
					url: '/pagesShop/list/kj_list'
				});
			},
			// 去促销商品列表
			goRouter8() {
				uni.navigateTo({
					// url: '/pagesShop/list/cx_list'
					url: '/pagesShop/list/ms_list'
				});
			},
			// 去商品搜索列表
			goRouter9() {
				uni.navigateTo({
					url: '/pagesShop/list/list'
				});
			},
			// 去商品详情
			goRouter10(item) { 
				if (Object.prototype.toString.call(item) === '[object Object]' && typeof item.id === 'string' && item.id !== '') {
					uni.navigateTo({
						url: `/pagesShop/details/details?cid=${item.id}`
					});
				} else {
					console.error("商品id错误",item.id);
				}
			},
			// 去秒杀商品详情
			goRouter11(item) {
				if (Object.prototype.toString.call(item) === '[object Object]' && typeof item.id === 'string' && item.id !== '') {
					uni.navigateTo({
						url: `/pagesShop/details/ms_details?cid=${item.id}`
					});
				} else {
					console.error("秒杀商品id错误",item.id);
				}
			},
			// 去店铺列表
			goRouter12() {
				uni.navigateTo({
					url: `/pagesShop/list/shop_list?nav1_id=&nav1_name=`
				});
			},
			// 去店铺详情
			goRouter13(item) {
				if (Object.prototype.toString.call(item) === '[object Object]' && typeof item.id === 'string' && item.id !== '') {
					uni.navigateTo({
						url: `/pagesShop/shop/index1?sid=${item.id}`
					});
				} else {
					console.error("店铺id错误",item.id);
				}
			},
			// 去积分商品列表
			goRouter14() {
				uni.navigateTo({
					url: '/pagesShop/list/jf_list'
				});
			},
			// 去积分商品详情
			goRouter15(item) {
				if (Object.prototype.toString.call(item) === '[object Object]' && typeof item.id === 'string' && item.id !== '') {
					uni.navigateTo({
						url: `/pagesShop/details/jf_details?id=${item.id}`
					});
				} else {
					console.error("积分商品id错误",item.id);
				}
			},
			// 商品分类
			getList1() {
				this.$http.post(this.$api.shop_index_1).then(result => {
					if (result.code === 200) {
						this.grids = result.data.slice(0, 7);
					} else {
						this.grids = []
					}
				}).catch(() => {
					this.grids = []
				})
			},
			// 秒杀商品
			getList2() {
				this.$http.post(this.$api.shop_index_2).then(result => {
					if (result.code === 200) {
						this.list4 = result.data;
					} else {
						this.list4 = []
					}
				}).catch(() => {
					this.list4 = []
				})
			},
			// 推荐商品
			getList3() {
				this.page1 = 1;
				this.$http.post(this.$api.shop_index_3, {}, {
					params: {
						pageNum: this.page1,
					}
				}).then(result => {
					if (result.code === 200) {
						const list = result.data.result;
						if (Array.isArray(list) && list.length > 0) {
							this.list1 = list
							if (this.list1.length < 10) {
								this.status1 = 'noMore'
							}
						} else {
							this.list1 = []
							this.status1 = 'noMore'
						}
					} else {
						this.list1 = []
						this.status1 = 'noMore'
					}
				}).catch(() => {
					this.list1 = []
					this.status1 = 'noMore'
				})
			},
			// 推荐商品
			getList3_1() {
				if (this.status1 === 'noMore') return
				this.page1++
				this.status1 = 'loading';
				this.$http.post(this.$api.shop_index_3, {}, {
					params: {
						pageNum: this.page1,
					}
				}).then(result => {
					if (result.code === 200) {
						const list = result.data.result;
						if (Array.isArray(list)) {
							if (list.length > 0) {
								this.list1 = this.list1.concat(list);
							} else {
								this.status1 = 'noMore'
							}
						} else {
							this.status1 = 'more'
						}
					}
				}).catch(() => {
					this.status1 = 'more'
				})
			},
			// 推荐店铺
			getList4() {
				this.page2 = 1;
				this.$http.post(this.$api.shop_index_4, {}, {
					params: {
						pageNum: this.page2,
					}
				}).then(result => {
					if (result.code === 200) {
						const list = result.data;
						if (Array.isArray(list) && list.length > 0) {
							this.list2 = list
							if (this.list2.length < 10) {
								this.status2 = 'noMore'
							}
						} else {
							this.list2 = []
							this.status2 = 'noMore'
						}
					} else {
						this.list2 = []
						this.status2 = 'noMore'
					}
				}).catch(() => {
					this.list2 = []
					this.status2 = 'noMore'
				})
			},
			// 推荐店铺
			getList4_1() {
				if (this.status2 === 'noMore') return
				this.page2++
				this.status2 = 'loading';
				this.$http.post(this.$api.shop_index_4, {}, {
					params: {
						pageNum: this.page2,
					}
				}).then(result => {
					if (result.code === 200) {
						const list = result.data;
						if (Array.isArray(list)) {
							if (list.length > 0) {
								this.list2 = this.list2.concat(list);
							} else {
								this.status2 = 'noMore'
							}
						} else {
							this.status2 = 'more'
						}
					}
				}).catch(() => {
					this.status2 = 'more'
				})
			},
			// 推荐商品-积分商城
			getList5() {
				this.page3 = 1;
				this.$http.post(this.$api.shop_index_5, {}, {
					params: {
						pageNum: this.page3,
					}
				}).then(result => {
					if (result.code === 200) {
						const list = result.data;
						if (Array.isArray(list) && list.length > 0) {
							this.list3 = list
							if (this.list3.length < 10) {
								this.status3 = 'noMore'
							}
						} else {
							this.list3 = []
							this.status3 = 'noMore'
						}
					} else {
						this.list3 = []
						this.status3 = 'noMore'
					}
				}).catch(() => {
					this.list3 = []
					this.status3 = 'noMore'
				})
			},
			// 推荐商品-积分商城
			getList5_1() {
				if (this.status3 === 'noMore') return
				this.$http.post(this.$api.shop_index_5, {}, {
					params: {
						pageNum: this.page3,
					}
				}).then(result => {
					if (result.code === 200) {
						const list = result.data;
						if (Array.isArray(list)) {
							if (list.length > 0) {
								this.list3 = this.list3.concat(list);
							} else {
								this.status3 = 'noMore'
							}
						} else {
							this.status3 = 'more'
						}
					}
				}).catch(() => {
					this.status3 = 'more'
				})
			},
			// 轮播图
			getList6() {
				this.$http.post(this.$api.shop_index_6, {}, {
					params: {
						type: this.tabindex
					}
				}).then(result => {
					if (result.code === 200) {
							// result.data
							result.data.forEach(item => {
								item.pic.split(',')
							})
							this.swipers = result.data;
					} else {
						this.swipers = []
					}
				})
			},
			// swiper 切换
			change(e) {
				this.current = e.detail.current;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shoptxt{
		position: absolute;
		right: 240rpx;
		margin-top: 38rpx;
		width: 101rpx;
		height: 48rpx;
		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 57rpx;
		text-shadow: 4rpx 4rpx 10rpx rgba(31, 158, 255, 0.8);

	}
	.shoptxt1{
		letter-spacing: 10rpx;
		position: absolute;
		left: 57rpx;
		margin-top: 56rpx;
		width: 120rpx;
		height: 48rpx;
		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 57rpx;
		text-shadow: 4rpx 4rpx 10rpx rgba(31, 158, 255, 0.8);
	}
	.status_bar {
		background-color: #00b4ff;
	}
	.area-content-box{
		padding: 0;
		margin-top: 88rpx;
	}
	
	.area-1 {
		height: 300rpx;
		position: relative;
		overflow: hidden;

		&::after {
			position: absolute;
			top: 0;
			left: -20%;
			content: "";
			display: block;
			width: 140%;
			height: 100%;
			background-color: $blue;
			border-radius: 0 0 50% 50%;
		}
	}

	.area-1-content {
		position: absolute;
		top: 20rpx;
		left: 0;
		z-index: 1;
		width: 100%;
	}

	.tab {
		position: fixed;
		top: calc(var(--status-bar-height) + 44px);
		left: 0;
		z-index: 2;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #00b4ff;
	}

	.tab-item {
		width: 4em;
		padding: 20rpx 0;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		position: relative;
		opacity: 0.8;

		&::after {
			content: "";
			display: block;
			width: 1em;
			height: 4rpx;
			background-color: transparent;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -0.5em;
		}

		&.active {
			opacity: 1;
			font-size: 30rpx;
			&::after {
				background-color: #fff;
			}
		}
	}

	.swiper {
		height: 300rpx;
		margin: 0 30rpx;
	}

	.area-2 {
		padding: 30rpx 0 0;
	}

	.grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10rpx 0;
		background-color: #fff;
	}

	.grid-item {
		padding: 15rpx 0;
		width: 25%;
		text-align: center;

		image {
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 5rpx;
		}

		text {
			display: block;
			font-size: 24rpx;
		}
	}

	.banners {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 30rpx;
		background-color: #fff;
	}

	.banner {
		width: 49%;

		image {
			width: 100%;
			height: 280rpx;
			border-radius: 12rpx;
		}

		&:nth-of-type(2) {
			image {
				&:nth-of-type(1) {
					margin-bottom: 10rpx;
					height: 130rpx;
					border-radius: 12rpx;
				}
			}
		}
	}

	.ms {
		background-color: #fff;
		padding: 30rpx;
	}

	.ms-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.ms-top-left {
		display: flex;
		align-items: center;

		text {
			font-size: 30rpx;
			font-weight: bold;

			&:nth-of-type(2) {
				color: $uni-color-error;
			}
		}
	}

	.ms-top-right {
		display: flex;
		align-items: center;

		image {
			width: 10rpx;
			height: auto;
			margin-left: 20rpx;
		}

		text {
			font-size: 24rpx;
			color: #999;
		}
	}

	.ms-bottom {
		padding: 30rpx 0 0;
	}

	.ms-list {
		display: flex;
	}

	.ms-list-item {
		flex-shrink: 0;
		width: 155rpx;

		&:not(:nth-last-of-type(1)) {
			margin-right: 20rpx;
		}
	}

	.ms-list-item-img {
		width: 100%;
		height: 155rpx;
		overflow: hidden;

		&>image {
			height: 155rpx;
			height: 155rpx;
		}
	}

	

	.cx {
		margin: 20rpx 0;
		padding: 20rpx 30rpx;
		background-color: #fff;

		image {
			width: 100%;
			height: 146rpx;
			border-radius: 74rpx;
		}
	}

	.tj {
		background-color: #fff;
		padding: 30rpx;
	}

	.tj-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tt-left {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;

		&::before {
			content: "";
			display: block;
			width: 6rpx;
			height: 30rpx;
			border-radius: 3rpx;
			background-color: $tc;
			margin-right: 20rpx;
		}
	}

	.tt-right {
		display: flex;
		align-items: center;

		image {
			width: 10rpx;
			height: auto;
			margin-left: 20rpx;
		}

		text {
			font-size: 24rpx;
			color: #999;
		}
	}

	.tj-content {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 30rpx 0 0;

		&::after {
			content: "";
			display: block;
			width: 49%;
		}
	}

	.tj-sp {
		width: 48%;
		border: 1px solid #eee;
		border-radius: 12rpx;
		box-shadow: 0px 0px 14rpx 0px rgba(189, 189, 189, 0.27);
		margin-bottom: 20rpx;
	}

	.tjs-img {
		width: 100%;
		height: 340rpx;
		border-radius: 12rpx 12rpx 0 0;
		overflow: hidden;

		image {
			width: 100%;
			height: 340rpx;
		}
	}

	.tjs-content {
		padding: 10rpx 20rpx;
	}

	.tsc-title {
		font-size: 26rpx;
		line-height: 36rpx;
		color: #666;
		min-height: 36rpx;
	}

	.tsc-price {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tsc-left {
		text {
			&:nth-of-type(1) {
				font-weight: bold;
			}

			&:nth-of-type(2) {
				margin-left: 10rpx;
				font-size: 24rpx;
				text-decoration: line-through;
				color: #999;
			}
		}
	}

	.tsc-right {
		text {
			font-size: 24rpx;
			color: #999;
		}
	}

	.tjshop {
		background-color: #fff;
		padding: 30rpx;
	}

	.tjshop-content {}

	.tc {
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;
	}

	.tc-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tc-top-left {
		display: flex;
		align-items: center;

		&>image {
			width: 88rpx;
			height: 88rpx;
			margin-right: 20rpx;
		}
	}

	.ttl-info {}

	.ttl-info-title {
		font-size: 28rpx;
	}

	.ttl-info-content {
		margin-top: 6rpx;
		display: flex;
		font-size: 24rpx;
		color: #999;

		view {
			margin-right: 40rpx;

			text {
				color: $uni-color-warning;
			}
		}
	}

	.tc-top-right {
		button {
			&::after {
				display: none;
			}

			border: 1px solid $uni-color-warning;
			border-radius: 25rpx;
			padding: 0;
			font-size: 26rpx;
			color: $uni-color-warning;
			width: 5em;
			height: 2em;
			line-height: 2em;
		}
	}

	.tc-bottom {
		padding-top: 20rpx;
		display: flex;
	}

	.tc-bottom-img {
		width: 200rpx;
		position: relative;
		margin: 0 44rpx 0 0;
	}

	.tbib {
		width: 100%;
		height: 200rpx;

		&>image {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.tcbp {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 5rpx 10rpx;
		border-radius: 0 8rpx 0 8rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #FF4A37;
	}

	.tjscore {
		background-color: #fff;
		padding: 30rpx;
	}

	.tjs-bottom {
		padding: 0 10rpx 20rpx;

		text {
			display: inline-block;
			background-color: #ffedee;
			padding: 5rpx 10rpx;
			color: $uni-color-error;
		}
	}
	
	.dot {
		position: absolute;
		left: 50%;
		bottom: 40rpx;
		transform: translateX(-50%);
	}
</style>
